<template>
<div>
  <div  class="top">
    <h4>管理内容</h4>
  </div>
    <div class="w4">
        <div class="sele">
            <form>
                <select name="year">
                    <option>2022</option>
                    <option>2021</option>
                    <option>2020</option>
                    <option>2019</option>
                </select>
                <select name="month">
                    <option>01</option>
                    <option>02</option>
                    <option>03</option>
                    <option>04</option>
                    <option>05</option>
                    <option>06</option>
                    <option>07</option>
                    <option>08</option>
                    <option>09</option>
                    <option>10</option>
                    <option>11</option>
                    <option>12</option>
                </select>
                <select name="day">
                    <option>01</option>
                    <option>02</option>
                    <option>03</option>
                    <option>04</option>
                    <option>05</option>
                    <option>06</option>
                    <option>07</option>
                    <option>08</option>
                    <option>09</option>
                    <option>10</option>
                    <option>11</option>
                    <option>12</option>
                </select>
                <select name="type">
                    <option>c语言</option>
                    <option>前端学习</option>
                    <option>学习计划</option>
                    <option>后端学习</option>
                    <option>实用技术</option>
                    <option>开发基础</option>
                    <option>微服务核心</option>
                    <option>日本历史</option>
                </select>
                <input type="text" placeholder="请输入关键字">
                <button><span class="iconfont">&#xe634;</span>搜索</button>
            </form>

        </div>
        <button class="upload"><span class="iconfont">&#xe682;</span>上传文章</button>
        <div class="content">
            <ul>
                <li>
                    <div class="box">
                        <img src="../assets/images/6.png">
                        <div class="tit">
                            <p>MyBatis学习笔记（新版）</p>
                            <ul>
                                <li>
                                    <span class="iconfont">&#xe8cf;</span>
                                    <text>发表于 2022-06-22</text>
                                </li>
                                <li>|</li>
                                <li>
                                    <span class="iconfont">&#xe60c;</span>
                                    <text>微服务核心</text>
                                </li>
                                <li>|</li>
                                <li>
                                    <span class="iconfont">&#xe60d;</span>
                                    <text>Java MyBatis</text>
                                </li>
                            </ul>
                        </div>
                        <button><span class="iconfont">&#xe666;</span>删除</button>
                    </div>
                </li>
                <li>
                    <div class="box">
                       <img src="../assets/images/10.png">
                        <div class="tit">
                            <p>Vue2学习笔记</p>
                            <ul>
                                <li>
                                    <span class="iconfont">&#xe8cf;</span>
                                    <text>发表于 2022-06-22</text>
                                </li>
                                <li>|</li>
                                <li>
                                    <span class="iconfont">&#xe60c;</span>
                                    <text>前端学习</text>
                                </li>
                                <li>|</li>
                                <li>
                                    <span class="iconfont">&#xe60d;</span>
                                    <text>前端框架 vue2</text>
                                </li>
                            </ul>
                        </div>
                        <button><span class="iconfont">&#xe666;</span>删除</button>
                    </div>
                </li>
                <li>
                    <div class="box">
                        <img src="../assets/images/7.png">
                        <div class="tit">
                            <p>2022年七月学习计划</p>
                            <ul>
                                <li>
                                    <span class="iconfont">&#xe8cf;</span>
                                    <text>发表于 2022-06-22</text>
                                </li>
                                <li>|</li>
                                <li>
                                    <span class="iconfont">&#xe60c;</span>
                                    <text>学习计划</text>
                                </li>
                                <li>|</li>
                                <li>
                                    <span class="iconfont">&#xe60d;</span>
                                    <text>学习计划</text>
                                </li>
                            </ul>
                        </div>
                        <button><span class="iconfont">&#xe666;</span>删除</button>
                    </div>
                </li>
                <li>
                    <div class="box">
                        <img src="../assets/images/12.png">
                        <div class="tit">
                            <p>Java新特性学习笔记</p>
                            <ul>
                                <li>
                                    <span class="iconfont">&#xe8cf;</span>
                                    <text>发表于 2022-06-22</text>
                                </li>
                                <li>|</li>
                                <li>
                                    <span class="iconfont">&#xe60c;</span>
                                    <text>开发基础</text>
                                </li>
                                <li>|</li>
                                <li>
                                    <span class="iconfont">&#xe60d;</span>
                                    <text>后端学习 后端基础</text>
                                </li>
                            </ul>
                        </div>
                        <button><span class="iconfont">&#xe666;</span>删除</button>
                    </div>
                </li>
                <li>
                    <div class="box">
                        <img src="../assets/images/4.png">
                        <div class="tit">
                            <p>クレヨンしんちゃん</p>
                            <ul>
                                <li>
                                    <span class="iconfont">&#xe8cf;</span>
                                    <text>发表于 2022-06-22</text>
                                </li>
                                <li>|</li>
                                <li>
                                    <span class="iconfont">&#xe60c;</span>
                                    <text>日语听力</text>
                                </li>
                                <li>|</li>
                                <li>
                                    <span class="iconfont">&#xe60d;</span>
                                    <text>日语学习 蜡笔小新</text>
                                </li>
                            </ul>
                        </div>
                        <button><span class="iconfont">&#xe666;</span>删除</button>
                    </div>
                </li>
                <li>
                    <div class="box">
                        <img src="../assets/images/30.png">
                        <div class="tit">
                            <p>MyBatis学习笔记</p>
                            <ul>
                                <li>
                                    <span class="iconfont">&#xe8cf;</span>
                                    <text>发表于 2022-06-22</text>
                                </li>
                                <li>|</li>
                                <li>
                                    <span class="iconfont">&#xe60c;</span>
                                    <text>微服务核心</text>
                                </li>
                                <li>|</li>
                                <li>
                                    <span class="iconfont">&#xe60d;</span>
                                    <text>Java MyBatis</text>
                                </li>
                            </ul>
                        </div>
                        <button><span class="iconfont">&#xe666;</span>删除</button>
                    </div>
                </li>
                <li>
                    <div class="box">
                        <img src="../assets/images/9.png">
                        <div class="tit">
                            <p>微信支付实战</p>
                            <ul>
                                <li>
                                    <span class="iconfont">&#xe8cf;</span>
                                    <text>发表于 2022-06-22</text>
                                </li>
                                <li>|</li>
                                <li>
                                    <span class="iconfont">&#xe60c;</span>
                                    <text>项目学习</text>
                                </li>
                                <li>|</li>
                                <li>
                                    <span class="iconfont">&#xe60d;</span>
                                    <text>在线支付</text>
                                </li>
                            </ul>
                        </div>
                        <button><span class="iconfont">&#xe666;</span>删除</button>
                    </div>
                </li>
                <li>
                    <div class="box">
                        <img src="../assets/images/3.png">
                        <div class="tit">
                            <p>MyBatis学习笔记</p>
                            <ul>
                                <li>
                                    <span class="iconfont">&#xe8cf;</span>
                                    <text>发表于 2022-06-22</text>
                                </li>
                                <li>|</li>
                                <li>
                                    <span class="iconfont">&#xe60c;</span>
                                    <text>微服务核心</text>
                                </li>
                                <li>|</li>
                                <li>
                                    <span class="iconfont">&#xe60d;</span>
                                    <text>Java MyBatis</text>
                                </li>
                            </ul>
                        </div>
                        <button><span class="iconfont">&#xe666;</span>删除</button>
                    </div>
                </li>
                <li>
                    <div class="box">
                        <img src="../assets/images/5.png">
                        <div class="tit">
                            <p>励志名言</p>
                            <ul>
                                <li>
                                    <span class="iconfont">&#xe8cf;</span>
                                    <text>发表于 2022-06-22</text>
                                </li>
                                <li>|</li>
                                <li>
                                    <span class="iconfont">&#xe60c;</span>
                                    <text>名言警句</text>
                                </li>
                                <li>|</li>
                                <li>
                                    <span class="iconfont">&#xe60d;</span>
                                    <text>励志图片 心灵鸡汤</text>
                                </li>
                            </ul>
                        </div>
                        <button><span class="iconfont">&#xe666;</span>删除</button>
                    </div>
                </li>
                <li>
                    <div class="box">
                        <img src="../assets/images/11.png">
                        <div class="tit">
                            <p>寄生獣</p>
                            <ul>
                                <li>
                                    <span class="iconfont">&#xe8cf;</span>
                                    <text>发表于 2022-06-22</text>
                                </li>
                                <li>|</li>
                                <li>
                                    <span class="iconfont">&#xe60c;</span>
                                    <text>日语单词</text>
                                </li>
                                <li>|</li>
                                <li>
                                    <span class="iconfont">&#xe60d;</span>
                                    <text>日语学习 日语漫画</text>
                                </li>
                            </ul>
                        </div>
                        <button><span class="iconfont">&#xe666;</span>删除</button>
                    </div>
                </li>
            </ul>
        </div>
    </div>
  </div>
</template>

<script>
export default {
    name:'Manage'
}
</script>

<style scoped>
    .top {
    height: 420px;
    background-image: url("../assets/images/41.png");
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: 100% 100%;
    padding-top: 160px;
}
.top h4 {
    text-align: center;
    font-size: 50px;
    color: pink;
}
.w4 {
    border: 1px solid rgb(179, 177, 177);
    margin: 50px auto; 
    width: 1200px;
    height: 1360px;
    border-radius: 2%;
    box-shadow: -5px -5px 16px rgb(222, 221, 221);
}
.sele{
    text-align: center;
    margin: 40px auto;
}
.sele select{
    padding: 10px;
    font-size: 14px;
    background-color: white;
    color: rgb(175, 174, 174);
    border: 1px solid rgb(175, 174, 174);
    border-radius: 8%;
    cursor: pointer;
    margin-right: 10px;
    height: 38px;
}
.sele input{
    border: 1px solid rgb(175, 174, 174);
    width: 180px;
    height: 38px;
    padding-left: 6px;
    border-radius: 8%;
    color: rgb(175, 174, 174);
    margin-left: 10px
}
.sele button{
    width: 75px;
    height: 36px;
    border: 1px solid coral;
    background-color: white;
    color: coral;
}
.upload{
    width: 110px;
    height: 36px;
    border: 1px solid coral;
    background-color: white;
    color: coral;
    margin-left: 80px;
    margin-bottom: 35px;
}
.box{
    height: 95px;
    border-bottom: 1px solid rgb(239, 236, 236);
    padding-left: 150px;
    margin-bottom: 20px;
}
.box img{
    float: left;
    width: 140px;
    height: 80px;
    margin-right: 20px;
}
.box .tit{
    float: left;
}
.box .tit p{
    font-size: 18px;
    margin-bottom: 5px;
}
.box .tit ul li{
    float: left;
    color: gray;
    margin-right: 5px;
}
.box button{
    font-size: 16px;
    width: 75px;
    height: 30px;
    border: 1px solid coral;
    background-color: white;
    color: coral;
    margin-left: 750px;
}
button:hover{
    background-color: coral;
    color: white;
}
 /* 图片经过放大 */
 img{
    overflow: hidden;
    transition: all 0.8s;
  }
  img:hover{
    transform: scale(1.1)
  }

</style>